<template>
  <div>
     <p :class="classA">段落A</p>
      <p :class="[classA]">段落A</p>
    <p :class="[classA,classB]">段落C</p>   
    <p :class="{red:flag==false}">段落D <button @click="flag=!flag">change</button></p>
    <p>
        <button :[attr1]="val1">提交    </button>
        <input :[attr1]="val1">
        <input type="radio"  v-model="sex" value="male"/>男
       <input type="radio" v-model="sex"   value="female" />女   
        {{ sex }}
    </p>
    <p>
        <img :src="sex=='male'?'/male.png':'/female.png'" alt="">
    </p>
    <p>
        <img :src="{male:sex=='male'}" alt="">
    </p>
    <p>
        <input type="checkbox" value="苹果" v-model="fruits">苹果
        <input type="checkbox" value="香蕉" v-model="fruits">香蕉
        <input type="checkbox" value="梨子" v-model="fruits">梨子       
    </p>
    <p>{{ fruits }}</p>
    <p>
        <select name="aa" id="aa" v-model="city">
            <option value="北京">北京</option>
             <option value="上海">上海</option>
              <option value="深圳" >深圳</option>
        </select>
        {{ city }}
    </p>
    <p>
        <input type="checkbox" v-model="agree" >同意
    </p>
  </div>
</template>

<script>
import male from '../assets/img/male.png'
import female from '../assets/img/female.png'
export default {
    data(){
        return{
            msg:'aa',
            classA:'red',
            classB:'weight',
            flag:false,
            attr1:'value',
            val1:'确定',
            sex:'male',
            male,
            female,
            fruits:[],
            city:'北京',
            agree:true
        }
    }
}
</script>
<style scoped>
.red{
    color:red;
}
.weight{
    font-weight: bold;
}
</style>